<template>
    <div class="yorha-warning-con" ref="yorhaWarningCon">
        <div class="title-box" ref="yorhaWarningTitle">
            <img src="../../assets/icons/warning.png">
            <span>{{title}}</span>
        </div>
        <div class="contain-box" ref="yorhaContainBox">{{content}}</div>
    </div>
</template>

<script setup>
import {getCurrentInstance, onMounted} from "vue";

/*
*
* fontSize表示标题文字的大小，内容字体时正文字体的一半*/
let props = defineProps(['title', 'content', 'width', 'height', 'backGround', 'fontSize', 'borderRadius'])
const pageInstance = getCurrentInstance();

function setSize() {
    pageInstance.refs.yorhaWarningCon.style.width = props.width
    pageInstance.refs.yorhaWarningCon.style.height = props.height
    pageInstance.refs.yorhaWarningCon.style.borderRadius = props.borderRadius
    pageInstance.refs.yorhaWarningCon.style.background = props.backGround
    let titleHeight = parseInt(props.fontSize)*1.5
    pageInstance.refs.yorhaWarningTitle.style.height = titleHeight + 'px'
    pageInstance.refs.yorhaWarningTitle.lastElementChild.style.fontSize = props.fontSize
    pageInstance.refs.yorhaWarningTitle.firstElementChild.style.width = props.fontSize
    pageInstance.refs.yorhaWarningTitle.firstElementChild.style.height = props.fontSize

    let containSize = parseInt(props.fontSize)/2
    pageInstance.refs.yorhaContainBox.style.fontSize = containSize + 'px'
    pageInstance.refs.yorhaContainBox.style.padding = `0 ${containSize}px ${containSize}px ${containSize}px`
}

onMounted(()=>{
    setSize()
})

</script>

<script>
export default {
    name:"YorhaWarningBox"
}
</script>

<style lang="less" scoped>


</style>